<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登陆页面</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background-image: url(img/v2-eb914abdab236dea6c6d6d65b2914898_r.jpg);
        background-size: cover;
        text-align: center;
      }
      .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        padding: 40px;
        background: rgba(0, 0, 0, 0.8);
        box-sizing: border-box;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
      }
      .box h2 {
        margin: 0 0 30px;
        padding: 0;
        color: #fff;
        text-align: center;
      }
      .box .inputBox {
        position: relative;
      }
      .box .inputBox input {
        width: 100%;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        letter-spacing: 1px;
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid #fff;
        outline: none;
        background: transparent;
      }
      .box .inputBox label {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        pointer-events: none;
        transition: 0.5s;
      }
      .box .inputBox input:focus ~ label,
      .box .inputBox input:valid ~ label {
        top: -18px;
        left: 0;
        color: #03a9f4;
        font-size: 12px;
      }
      .box input[type='submit'] {
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        background: #03a9f4;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
      }
      .radioBox label {
        color: white;
      }
      .login {
        font-size: 13.3333px;
      }
      .login > input {
        width: 100px;
        height: 40px;
        background-color: grey;
        border-radius: 5px;
        border: none;
        -webkit-appearance: none;
        margin-top: 30px;
        margin-right: 30px;
        color: white;
      }
      .login > a {
        text-decoration: none;
        color: white;
      }
      #user,
      #pass,
      #status {
        font-size: 12px;
        color: red;
        height: 20px;
        text-align: left;
      }
      #status {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <form action="/LoginServlet" method="post">
        <h2>学生宿舍管理系统登录</h2>
        <div class="inputBox">
          <input type="text" name="username" required="" />
          <label>用户名</label>
          <div id="user"></div>
        </div>
        <div class="inputBox">
          <input type="password" name="userpasss" required="" />
          <label>密码</label>
          <div id="pass"></div>
        </div>

        <div class="radioBox" name="type">
          <label for=""
            ><input
              type="radio"
              name="administrator"

              value="超级管理员"
            />超级管理员</label
          >
          <label for=""
            ><input
              type="radio"
              name="administrator"

              value="辅导管理员"
            />辅导管理员</label
          >
          <label for=""
            ><input
              type="radio"
              name="administrator"

              value="宿舍管理员"
              checked
            />宿舍管理员</label
          >
          <div id="status"></div>
        </div>
        <div class="login">
          <input type="submit" value="登录" />
        </div>
      </form>
      <script src="./js/jquery-3.6.0.min.js"></script>
      <script>
        $('.login>input').click(function () {
          let cname = /^[\u4e00-\u9fa5]{2,}$/

          if (
            $('.inputBox>input').val() == '' ||
            !cname.test($('.inputBox>input').val())
          ) {
            $('#user').html('用户名不能为空且必须是两个汉字及以上')
          } else {
            $('#user').html('')
          }
          let reg = /^\d{6}$/
          if (
            $('.inputBox:eq(1)>input').val() == '' ||
            !reg.test($('.inputBox:eq(1)>input').val())
          ) {
            $('#pass').html('密码不能为空且必须6位数以上的数字')
          } else {
            $('#pass').html('')
          }
          let len = $(':radio:checked').length
          if (len == 0) {
            $('#status').html('请选择身份')
          } else {
            $('#status').html('')
          }
          if (
            cname.test($('.inputBox>input').val()) &&
            reg.test($('.inputBox:eq(1)>input').val())
          ) {
            window.location.href = './main.html'
          }
        })
      </script>
    </div>
  </body>
</html>
